<template>
  <div class="app-container" style="padding: 8px;">
    <div class="head-container">
      <el-row :gutter="15">
        <el-form ref="form" label-position="right" :model="form" size="small" label-width="80px">
          <!--   上传文件   -->
          <el-col :span="24">
            <el-form-item label="文本文件">
              <el-upload
                ref="upload"
                :limit="1"
                :before-upload="beforeUpload"
                :auto-upload="true"
                :headers="headers"
                :on-success="handleSuccess"
                action=""
                :http-request="doSubmit"
              >
                <el-button slot="trigger" size="small" type="primary" style="margin-right:10px;">选取文件</el-button>
                <span slot="tip" class="el-upload__tip">请上传，且不超过100M</span>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="分隔符" prop="separatorChars">
              <el-input v-model="form.separatorChars" placeholder="请输入开始时间" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="内容符" prop="contentSignChars">
              <el-input v-model="form.contentSignChars" placeholder="请输入结束时间" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <div class="body-container">
      {{ bodyContainer }}
    </div>
  </div>

</template>

<script>
    import {mapGetters} from 'vuex'
    import {getToken} from '@/utils/auth'
    import checkPermission from '@/utils/permission'
    import initData from '@/mixins/initData'
    import {parseTime, downloadFile} from '@/utils/index'
    import {transListToExcel} from '@/api/code-tools'
    import {downloadFileFunction} from '@/api/downloadFile'

    export default {
        mixins: [initData],
        data() {
            return {
                form: {
                    separatorChars: '||',
                    contentSignChars: '\''
                },
                bodyContainer: '',
                headers: {'Authorization': 'Bearer ' + getToken()}
            }
        },
        computed: {
            ...mapGetters([
                'baseApi',
                'excelFileUploadApiGeneratorMysql',
                'excelFileUploadApiGeneratorMysqlZip'
            ])
        },
        created() {
            this.$nextTick(() => {
                this.init()
            })
        },
        methods: {
            parseTime,
            checkPermission,
            beforeUpload(file) {
                let isLt2M = true
                isLt2M = file.size / 1024 / 1024 < 100
                if (!isLt2M) {
                    this.$message.error('上传文件大小不能超过 100MB!')
                }
                this.loading = false
                return isLt2M
            },
            handleSuccess(response, file, fileList) {
                //this.bodyContainer = response
                //this.$refs.upload.clearFiles()
                //this.resetForm()
            },
            resetForm() {
                this.$refs['form'].resetFields()
                this.$refs.upload.clearFiles()
                this.form = {
                }
            },
            doSubmit(item) {
                this.loading = true
                let ttFile = item.file;
                const form = new FormData()
                // 文件对象
                form.append('file', ttFile)
                form.append('separatorChars', this.form.separatorChars)
                form.append('contentSignChars', this.form.contentSignChars)
                let fileName = ttFile.name;
                let outputFileName = fileName.split(".")[0] + `转化成excel结果.xlsx`;
                transListToExcel(form).then(res => {
                    downloadFileFunction(res, outputFileName)
                    this.resetForm()
                    this.$notify({
                        title: '文件处理成功',
                        type: 'success',
                        duration: 2500
                    })
                }).catch(err => {
                    console.log(err);
                });
            }
        }
    }
</script>
